{extend name='layout:app' /}

{block name='css'}
    <link rel="stylesheet" href="__STATIC__/css/dropload.css">
    <script src="__STATIC__/js/dropload.js"></script>
    <link rel="stylesheet" href="__STATIC__/css/order-receiving.css">
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>配送员接单-送件上门</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>

        <div class="order">
            <div class="order-sort" @click="orderSort">
                <div class="sort active" data-id="1">进行中</div>
                <div class="sort" data-id="0">待接订单</div>
                <div class="sort" data-id="2">已完成订单</div>
            </div>
            <div class="order-list" v-cloak>
                <div class="order-cont">
                    <div class="list" v-for="order in orderList">
                        <div class="list-item">
                            <div class="item icon"><i class="iconfont icon-lbs"></i></div>
                            <div class="item">
                                <div class="order-num">订单号：<span>{{order.code}}</span></div>
                                <!--<div><span class="name">{{order.name}}</span><span class="phone">{{order.phone}}</span></div>-->
                                <div class="addr">收件人：{{order.addr}}</div>
                                <div class="sort" v-html="order.sort == 0?'上门取件':'送件上门' "></div>
                                <div class="date"><span><!--订单发布时间--></span>{{order.create_time}}</div>
                            </div>
                        </div>
                        <div class="list-bot">
                            <div class="option" @click="receiveOrder(order.code)" v-if="currentSort == 0">
                                <i class="iconfont icon-jiedan"></i>
                                <span>我要接单</span>
                            </div>
                            <div class="option" @click="showCode(order.code)" v-if="currentSort == 1">
                                <i class="iconfont icon-jiedan"></i>
                                <span>查看二维码</span>
                            </div>
                            <a class="option"  :href="'tel:'+order.tel" v-if="currentSort !== 2">
                                <i class="iconfont icon-contact-service"></i>
                                <span>联系客户</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}

{block name='footer'}
<div class="fot" style="width: 100%;display: flex;text-align: center;position:fixed;bottom: 0;background-color: #ffffff;">
    <div class="tab" style="flex:1;border-right:1px solid #ddd;padding: 15px 0;background: #007aff;color: #fff;">
        <a href="/index/sender/index"style="background: #007aff;color: #fff;">
<!--            <i class="iconfont icon-home"></i>-->
            <div>送件上门</div>
        </a>
    </div>
    <div class="tab" style="flex:1;padding: 15px 0;">
        <a href="/index/sender/pickorder" >
<!--            <i class="iconfont icon-service"></i>-->
            <div>上门取件</div>
        </a>
    </div>
</div>
{/block}

{block name='js'}
<script>
    var that
    var page = -1
    var xhr

    new Vue({
        el:'#app',
        data: {
            orderList: [],
            currentSort: 1
        },
        created() {
            that = this  //生成vue副本
            this.$nextTick(() => {
                this.getOrder(1)
            })
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            orderSort(e) {
                const orderSort = e.target.innerText
                this.orderList = [] //清空列表
                setTimeout(() => {
                    console.log($('.dropload-refresh').length)
                    if($('.dropload-refresh').length) {
                        $(e.target).click()
                        return false
                    }
                }, 100)


                if(orderSort === '进行中') {
                    this.currentSort = 1
                    this.getOrder(1)
                }else if(orderSort === '待接订单'){
                    this.currentSort = 0
                    this.getOrder(0)
                }else {
                    this.currentSort = 2
                    this.getOrder(2)
                }
                $(e.target).addClass('active')
                $(e.target).siblings().removeClass('active')
            },
            showCode(code) {
                window.location.href = '/index/sender/showcode?code='+ code
            },
            getOrder(_status) {
                $('.dropload-down').remove()  //清除信息提示dom
                page = -1  //page重置
                $('.order-list').dropload({
                    scrollArea : window,
                    threshold : 0, //提前加载距离
                    autoLoad: true,
                    domUp: [],
                    loadDownFn : function(me){
                        page++;
                        $.ajax({
                            type: 'GET',
                            url: '/index/sender/getOrder?page='+page,
                            data: {status: _status},
                            dataType: 'json',
                            success: function(res){
                                //频繁来回切换，快速点击同一个处理
                                var _currStatus = $('.order-sort .active').attr('data-id')
                                if(_currStatus != _status) {
                                    that.orderList = []
                                    return false
                                }


                                var data = res.data
                                if(data.length) {
                                    for(v of data) {
                                        that.orderList.push(
                                            {code:v.code,addr:v.addr,create_time:v.create_time,sort:v.sort,tel:that.getTel(v.addr)}
                                        )
                                    }
                                    if(data.length < 10) {
                                        me.lock();
                                        me.noData();
                                        me.resetload();
                                        return false
                                    }
                                }else{  // 如果没有数据
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    // $('.dropload-refresh').html('')
                                }
                                // 为了测试，延迟1秒加载
                                /*setTimeout(function(){
                                    // 插入数据到页面，放到最后面
                                    // $('.lists').append(result);
                                    // 每次数据插入，必须重置
                                    // me.resetload();
                                },1000);*/
                                me.resetload();
                            },
                            error: function(xhr, type){
                                alert('Ajax error!');
                                // 即使加载出错，也得重置
                                me.resetload();
                            }
                        });
                    }
                });
            },
            receiveOrder(orderCode) {
                $.post('/index/sender/getSendOrder',{order_code:orderCode},function (res) {
                    console.log(res)
                    if(res.code === 0) {
                        $('.order-sort .sort:eq(0)').click()
                    }
                })
            },
            getTel(str) {
                const Tel =  /[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}/g;
                var telNum = str.match(Tel)[0]
                return telNum
            }
        }
    });




</script>
{/block}